<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 添加游记</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="__PUBLIC__/admin/favicon.ico">
    <link href="__PUBLIC__/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/js/spectrum/spectrum.css">
    <link href="__PUBLIC__/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/animate.css" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__PUBLIC__/admin/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form method="post" class="form-horizontal" onsubmit="return false">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">*标题</label>
                            <div class="col-sm-10">
                                <input type="text"  class="form-control" id="title" name="title" placeholder="12字以内" value="<{$data.title}>">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">*启用状态</label>
                            <div class="col-sm-10">
                                <select id="status" name="status">
                                    <option value="1" <if condition="$data['status'] eq 1">selected</if>>未启用</option>
                                    <option value="2" <if condition="$data['status'] eq 2">selected</if>>启用</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">*主题颜色</label>
                            <div class="col-sm-10">
                                <input id="full" />
                            </div>
                        </div>
                        <div class="form-group">
                        <input type="file" onchange="uploadimgs()" id="uploadimg" name="uploadimg" style="display:none" accept="image/jpeg,image/jpg,image/png" value="">
                        <label class="col-sm-2 control-label" for="uploadimg"><a class="btn btn-success">上传banner图</a></label>
                        <div class="col-sm-10" id="newimg">
                            <if condition="$data['banner'] neq ''">
                                <img src="<{$data.banner}>" style="width:10rem">
                                <else/>
                                <img style="width:10rem" src="__PUBLIC__/admin/img/webuploader.png">
                            </if>
                            <br><strong style="color: red">注:</strong>上传图片尺寸为750px*450px，大小为500KB以内,<br>底部色块和banner图最底部的颜色一致,<strong style="color: red">请勿选择白色</strong>
                        </div>
                        <input type="text" id="img_url"  style="display: none"  placeholder="" class="form-control">
                        </div>





                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="button" onclick="save()">保存</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>


<script src="__PUBLIC__/admin/js/spectrum/docs/jquery-2.1.0.js"></script>
<script src="__PUBLIC__/admin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/admin/js/layer/layer.js"></script>
<script src="__PUBLIC__/admin/js/layui/layui.js"></script>
<script type="text/javascript" src="__PUBLIC__/admin/js/spectrum/spectrum.js"></script>
<script type='text/javascript' src='__PUBLIC__/admin/js/spectrum/docs/toc.js'></script>
<script type='text/javascript' src='__PUBLIC__/admin/js/spectrum/docs/docs1.js'></script>
<script src="__PUBLIC__/admin/js/content.js?v=1.0.0"></script>
<script src="__PUBLIC__/admin/js/plugins/fancybox/jquery.fancybox.js"></script>
<script src="__PUBLIC__/admin/js/ajaxfileupload.js"></script>
<script>
    $("#title").on("input propertychange", function() {
        var $this = $(this),
            _val = $this.val(),
            count = "";
        if (_val.length > 12) {
            $this.val(_val.substring(0, 12));
        }
        count = 12 - $this.val().length;
    });
</script>
<script>
    function uploadimgs(){
        var url='__MODULE__/Operate/uploadimg';
        layer.load(2);
        $.ajaxFileUpload({
            url:url,//需要链接到服务器地址
            secureuri:false,
            fileElementId:'uploadimg',//文件选择框的id属性file的id
            dataType:'json',
            success:function(data){
                layer.closeAll('loading');
                if(data.code=='1001'){
                    var html='<img  style="width:15rem" src="'+data.result+'" >';
                    $('#newimg').html(html);
                    $('#img_url').val(data.result);
                }else{
                    if(data.status=='0'){
                        layer.msg(data.result,{icon:5,time:2000});
                    }else{
                        layer.msg(data.result,{icon:5,time:2000});
                    }
                }
            }
        });
    }

    $(document).ready(function(){
       if('<{$data.color}>'!=''){
           document.getElementsByClassName('sp-preview-inner')[0].style.backgroundColor='<{$data.color}>';
       }
    });
</script>
<script>
    var url="__MODULE__/Operate/edit_style_func";
    //提交
    var op=1;
    var picop=1;
    function save() {
        if(op==2){
            layer.close(index);
            layer.msg('请勿重复点击',{icon:5,time:2000});
            return false;
        }

        var index = layer.load(1, {
            shade: [0.1,'#fff'] //0.1透明度的白色背景
        });
        if(op==1) {
            op=2;
            var id='<{$data.id}>';
            var color = document.getElementsByClassName('sp-preview-inner')[0].style.backgroundColor;
            var title =$("#title").val();
            var banner = $("#img_url").val();
            var status=$("#status option:selected").val();
            if(id==""){
                if(banner==""){
                    layer.close(index);
                    layer.msg('标题必填，banner图必传!', {icon: 5, time: 1000});
                    op=1
                    return false;
                }
            }
            if(title==""){
                layer.close(index);
                layer.msg('标题必填，banner图必传!', {icon: 5, time: 1000});
                op=1
                return false;
            }
            $.post(url, {
                    id:id,
                    title:title,
                    color:color,
                    banner:banner,
                    status:status
                },
                function (data) {
                    op=1
                    layer.closeAll();
                    if(data.code=='1001'){
                        window.parent.applys();//
                  }else{
                        if(data.status=='0'){
                            layer.msg(data.info,{time:2000,icon:5});
                        }else{
                            layer.msg(data.result,{time:2000,icon:5});
                        }
                    }


                }, 'json');
        }
    }

</script>
</body>
</html>
